* {
  padding: 0;
  margin: 0;
}

$iamge9: url(/src/assets/image/speaking.jpeg);
$iamge10: url(/src/assets/image/speeching.gif);
$iamge11: url(/src/assets/image/answer-model.svg);
$iamge12: url(/src/assets/image/answer-icon.svg);
$iamge13: url(/src/assets/image/chat-model.svg);
$iamge14: url(/src/assets/image/chat-model-active.svg);

@mixin background-image($image) {
  background-image: $image;
}

.box {
  width: 100%;
  height: 100%;

  header {
    width: 100%;
    height: 12%;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;

    button {
      margin-right: 2%;
    }
  }

  main {
    width: 100%;
    height: 80%;
    padding: 2% 0;
    display: flex;

    .left {
      width: 40%;
      height: 96%;
    }

    .rigth {
      width: 60%;
      height: 96%;
      position: relative;
      padding-top: 3%;

      .bell {
        position: absolute;
        height: 50px;
        top: 0;
        right: 1%;
        z-index: 99;
        display: flex;
        align-items: center;

        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          margin-left: 10px;
        }
        p {
          background: #fbf0b4;
          padding: 10px;
          border-radius: 15px 15px 0 15px;
          font-size: 12px;
        }
      }

      .chat {
        width: 90%;
        height: 90%;
        transform: translate(0, 7%);
        margin-left: 5%;
        border-radius: 10%;
        padding: 5%;
        display: flex;
        flex-direction: column;
        overflow-y: scroll;

        &.image1 {
          background: #fff;
        }

        &.image2 {
          background: gray;
        }

        .chat-context {
          margin: 10px 0;
          line-height: 30px;
          color: #fff;
          font-size: 14px;
          display: flex;

          &.user {
            span {
              background: #187f01;
              display: inline-block;
              padding: 5px 10px;
              border-radius: 10px 10px 0 10px;
              max-width: 70%;
            }

            justify-content: flex-end;
          }

          &.ai {
            span {
              background: #000;
              display: inline-block;
              padding: 5px 10px;
              border-radius: 10px 10px 10px 0;
              max-width: 70%;
            }
            justify-content: flex-start;
          }
        }
      }

      video {
        width: 90%;
        height: 90%;
        margin: 5%;
      }
    }
  }

  footer {
    width: 100%;
    height: 8%;
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;

    .center {
      height: 80px;
      width: 80px;
      position: absolute;
      left: 50%;
      top: 50%;
      border-radius: 50%;
      transform: translate(-50%, -90%);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      &.talk1 {
        @include background-image($iamge9);
      }

      &.talk2 {
        @include background-image($iamge10);
      }

      &.inp{
        width: 200px;
      transform: translate(-50%, -60%);
      }
    }

    .right {
      height: 40px;
      width: 40px;
      border-radius: 50%;
      margin-right: 2%;

      &.answers {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        &.image1 {
          @include background-image($iamge11);
          cursor: pointer;
        }

        &.image2 {
          @include background-image($iamge12);
          cursor: pointer;
        }
      }

      &.chat {
        background-repeat: no-repeat;
        background-size: 100% 100%;
        &.image1 {
          @include background-image($iamge13);
          cursor: pointer;
        }

        &.image2 {
          @include background-image($iamge14);
          cursor: pointer;
        }
      }
    }
  }

  
    .btn{
      position: fixed;
      bottom: 0%;
      right: 50%;
      transform: translate(50%,0);
    }
}
